---
id: highlight
category: typography
title: Highlight
package: '@chakra-ui/layout'
description: Highlight allows you to highlight substrings of a text.
---

## Import

```js
import { Highlight } from '@chakra-ui/react'
```

## Usage

Render the main string as children of the Highlight component, then pass the
word(s) you want to highlight to the `query` prop. Use the `style` prop to
define the styles for the highlighted parts.

### Highlight a word

```jsx
<Highlight query='spotlight' styles={{ px: '1', py: '1', bg: 'orange.100' }}>
  With the Highlight component, you can spotlight words.
</Highlight>
```

### Usage with Heading

The Highlight component can be used within any of the typography components.
Here's an example of how to use it within Heading

```jsx
<Heading lineHeight='tall'>
  <Highlight
    query='spotlight'
    styles={{ px: '2', py: '1', rounded: 'full', bg: 'red.100' }}
  >
    With the Highlight component, you can spotlight words.
  </Highlight>
</Heading>
```

### Highlight with multiple words

To highlight multiple phrases that have the same style, pass the substrings you
want to highlight as an array to the `query` prop

```jsx
<Heading lineHeight='tall'>
  <Highlight
    query={['spotlight', 'emphasize', 'Accentuate']}
    styles={{ px: '2', py: '1', rounded: 'full', bg: 'teal.100' }}
  >
    With the Highlight component, you can spotlight, emphasize and accentuate
    words.
  </Highlight>
</Heading>
```

> The query for the strings is case insensitive. Notice "Accentuate" in the
> query.

### Highlight substrings

The Highlight component allows you to highlight substrings of a word. A good use
case for this is in a search query.

```jsx
<Box>
  <Text>Search result for: "spot"</Text>
  <Text mt='6' fontWeight='bold'>
    <Highlight query='spot' styles={{ py: '1', fontWeight: 'normal' }}>
      Spotlight bulb
    </Highlight>
  </Text>
  <Text fontWeight='bold'>
    <Highlight query='spot' styles={{ py: '1', fontWeight: 'normal' }}>
      Spot cleaner
    </Highlight>
  </Text>
  <Text fontWeight='bold'>
    <Highlight query='spot' styles={{ py: '1', fontWeight: 'normal' }}>
      Spot ceiling
    </Highlight>
  </Text>
</Box>
```

### Customizing rendered elements

In cases where you want to customize multiple rendered elements and their
styles, use the `useHighlight` hook.

```js
import { useHighlight } from '@chakra-ui/react'
```

```jsx
// prettier-ignore
() => {
  const chunks = useHighlight({
    text: 'With the Highlight component, you can spotlight, emphasize and accentuate words instantly',
    query: ['spotlight', 'emphasize', 'accentuate', 'instantly']
  })

  return (
    <Heading lineHeight="tall">
      {chunks.map(({ match, text }) => {
        if (!match) return text
        return text === 'instantly' ? (
          <Box as='u' fontFamily='NewYork'>
            {text}
          </Box>
        ) : (
          <Mark bg='black' color="white"  fontFamily='NewYork' px='2' py='1'>
            {text}
          </Mark>
        )
      })}
    </Heading>
  )
}
```
